//测试响应
window.onload = async function () {
    const res = await axios({
      url: '/dashboard',
      method: 'get',
      // 额外的设置请求头
      // 把登录之后的token 带到服务器
      // 接口/后端去校验 token是否正确
      // headers: {
      //   // msg这个值 只是用来的测试的 没有任何意义
      //   // msg: 'good good study day day up',
      //   // 缓存中获取 token
      //   Authorization: localStorage.getItem('token'),
      // },
    });
    console.log('res:', res);
    const {
      data: { overview, year, salaryData, groupData, provinceData },
    } = res;
    // console.log(overview);
    for (const key in overview) {
      document.querySelector('[name=' + key).innerHTML = overview[key];
    }
    renderYear(year);
    renderSalary(salaryData);
    everySalary(groupData);
    initMapChart(provinceData);
    boySalary(salaryData);
  
    const btns = document.querySelector('#btns');
    btns.addEventListener('click', function (e) {
      if (e.target.tagName === 'BUTTON') {
        btns.querySelector('.btn-blue')?.classList.remove('btn-blue');
        e.target.classList.add('btn-blue');
        const num = e.target.innerHTML;
        // console.log(num);
        everySalary(groupData, num);
      }
    });
  };
  //封装全学科薪资的图表
  const renderYear = (data) => {
    // console.log(data);
    const myChart = echarts.init(document.querySelector('#line'));
    // 指定图表的配置项和数据
    myChart.setOption({
      // 标题
      title: {
        text: '2021年全学科薪资走向',
        top: '3%',
        left: '2%',
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      //鼠标移动出现提示
      tooltip: {
        trigger: 'axis',
      },
      //设置折线图为渐变颜色
      color: [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#499FEE', // 0% 处的颜色
            },
            {
              offset: 1,
              color: '#5D75F0', // 100% 处的颜色
            },
          ],
        },
      ],
      xAxis: {
        type: 'category',
        data: data.map((item) => item.month),
        //设置坐标轴轴线样式（颜色和虚线）
        axisLine: {
          lineStyle: {
            color: '#ccc',
            type: 'dashed',
          },
        },
        //坐标轴标签的颜色
        axisLabel: {
          color: '#999',
        },
      },
      yAxis: {
        type: 'value',
        //分隔线的样式
        splitLine: {
          lineStyle: {
            type: 'dashed',
          },
        },
      },
      series: [
        {
          name: '热度',
          type: 'line',
          data: data.map((item) => item.salary),
          smooth: true,
          lineStyle: {
            width: 5,
          },
          symbolSize: 10,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#499FEE',
              },
              {
                offset: 0.8,
                color: 'rgba(255,255,255,0.2)',
              },
              {
                offset: 1,
                color: 'rgba(255,255,255,0)',
              },
            ]),
          },
        },
      ],
    });
    // 使用刚指定的配置项和数据显示图表。
    // myChart.setOption(option);
  };
  
  //封装班级薪资的饼图
  const renderSalary = (data) => {
    // console.log(data);
    const myChart = echarts.init(document.querySelector('#salary'));
    myChart.setOption({
      title: {
        text: '班级薪资分布',
        top: '3%',
        left: '2%',
        textStyle: {
          fontSize: 18,
        },
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        bottom: '12%',
        left: 'center',
      },
      color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
      series: [
        {
          name: '班级薪资分布',
          type: 'pie',
          //半径:radius
          radius: ['50%', '65%'],
          //中心点坐标
          center: ['50%', '45%'],
          //区域样式
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 4,
          },
          //文本
          label: {
            show: false,
            position: 'center',
          },
          data: data.map((item) => {
            return {
              value: item.g_count + item.b_count,
              name: item.label,
            };
          }),
        },
      ],
    });
  };
  //每组薪资柱状图
  const everySalary = (data, num = 1) => {
    const myChart = echarts.init(document.querySelector('#lines'));
    myChart.setOption({
      tooltip: {
        trigger: 'item',
      },
      xAxis: {
        type: 'category',
        data: data[num].map((item) => {
          return item.name;
        }),
        axisLine: {
          lineStyle: {
            color: '#ccc',
            type: 'dashed',
          },
        },
        axisLabel: {
          color: '#999',
        },
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed',
          },
        },
      },
      color: [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#34D39A', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(52,211,154,0.2)', // 100% 处的颜色
            },
          ],
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#499FEE', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(73,159,238,0.2)', // 100% 处的颜色
            },
          ],
        },
      ],
      series: [
        {
          data: data[num].map((item) => {
            return item.hope_salary;
          }),
          type: 'bar',
          name: '期望薪资',
        },
        {
          data: data[num].map((item) => {
            return item.salary;
          }),
          type: 'bar',
          name: '就业薪资',
        },
      ],
    });
  };
  //封装男女薪资的饼图
  const boySalary = (data) => {
    // console.log(data);
    const myChart = echarts.init(document.querySelector('#gender'));
    myChart.setOption({
      title: [
        {
          text: '男生薪资分布',
          left: 'center',
          top: '5%',
          textStyle: {
            fontSize: 18,
            fontweight: '400',
          },
        },
        {
          text: '女生薪资分布',
          left: 'center',
          top: '50%',
        },
      ],
      color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
      tooltip: {
        trigger: 'item',
      },
  
      series: [
        {
          name: '男生薪资',
          type: 'pie',
          radius: ['25%', '35%'],
          center: ['50%', '30%'],
          data: data.map((item) => {
            return {
              value: item.b_count,
              name: item.label,
            };
          }),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
        {
          name: '女生薪资',
          type: 'pie',
          radius: ['25%', '35%'],
          center: ['50%', '80%'],
          data: data.map((item) => {
            return {
              value: item.g_count,
              name: item.label,
            };
          }),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    });
  };
  
  //封装地图
  const initMapChart = (provinceData) => {
    const myEchart = echarts.init(document.querySelector('#map'));
    let option = {
      title: {
        text: '籍贯分布',
        top: 10,
        left: 10,
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} 位学员',
        borderColor: 'transparent',
        backgroundColor: 'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff',
        },
      },
      visualMap: {
        min: 0,
        max: 6,
        left: 'left',
        bottom: '20',
        text: ['6', '0'],
        inRange: {
          color: ['#ffffff', '#0075F0'],
        },
        show: true,
        left: 40,
      },
      geo: {
        map: 'china',
        roam: false,
        zoom: 1.0,
        label: {
          normal: {
            show: true,
            fontSize: '10',
            color: 'rgba(0,0,0,0.7)',
          },
        },
        itemStyle: {
          normal: {
            borderColor: 'rgba(0, 0, 0, 0.2)',
            color: '#e0ffff',
          },
          emphasis: {
            areaColor: '#34D39A',
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 20,
            borderWidth: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
      series: [
        {
          name: '籍贯分布',
          type: 'map',
          geoIndex: 0,
          data: provinceData,
        },
      ],
    };
    myEchart.setOption(option);
  };
  